<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="keyWord" />
    <MyInfo :list="renderList" @details="details"></MyInfo>
    <NewInfo :choose="choose" @change="change" :list="renderList" :newId="newId"></NewInfo>
  </div>
</template>

<script>
import MyInfo from './components/MyInfo.vue'
import NewInfo from './components/NewInfo.vue'
export default {
  components: {
    MyInfo,
    NewInfo
  },
  data() {
    return {
      newId:0,
      keyWord: '',
      choose:false,
      list: [
        {
          id: 1,
          time: '2022-5-7',
          uname: '马保国',
          res: '脑瘫',
          medicine: '脑白金',
        },
        {
          id: 2,
          time: '2022-5-8',
          uname: '杨永信',
          res: '精神病',
          medicine: '成长快乐',
        },
        {
          id: 3,
          time: '2022-5-9',
          uname: '盖伦',
          res: '骨折',
          medicine: '万通胫骨贴',
        },
        {
          id: 4,
          time: '2022-5-10',
          uname: '卡莎',
          res: '抑郁',
          medicine: '安眠药',
        },
      ],
    }
  },
  methods: {
    details(id){
      this.choose =true
      this.newId =id
    },
    change(){
      this.choose =!this.choose
    }
  },
  watch: {},
  computed: {
    renderList() {
      if (this.keyWord) {
        return this.list.filter((item) => {
          return  item.time.includes(this.keyWord) ||
            item.uname.includes(this.keyWord) ||
            item.res.includes(this.keyWord) ||
            item.medicine.includes(this.keyWord)
        })
      } else {
         return this.list
      }
    },
  },
}
</script>

<style scoped lang="less"></style>
